<template>
  <div id="app">
    <div v-show="headerIsShow"  class="header">
      <div class="header-content">
        <nav class="header-left">
          <img src="./assets/head-logo.a7cedf3.svg">
          <ul>
            <li v-for="(item,index) in headerlist"><span @click="headerClickHandler(item,index)" :class="{active:index==activedefault}">{{item.title}}</span></li>
          </ul>
        </nav>
        <div class="header-right">
          <div class="shopping-bar">
            <b v-if="this.$store.state.shopping_car_number">{{this.$store.state.shopping_car_number}}</b>
            <img src="./assets/shopping-bar.svg"/>
            <span>购物车</span>
          </div>
          <div v-if="this.$store.state.token" class="box-right">
            <div class="nav-study" @click="clear_shopping_car()">学习中心</div>
            <div class="nav-img" @mouseover="mouseOver" @mouseleave="mouseLeave">
              <img src="./assets/default-head.png">
            </div>
            <ul class="header-drop-down"  :style="myStyle" @mouseover="mouseOver" @mouseleave="mouseLeave">
              <li v-for="(item,index) in personal" @click="myClickHandler(item,index)"
                  @mouseover="addActive(index)" :class="{myactive:index==myActive }">{{item.title}}
                <i class="fa el-icon-arrow-right "></i>
              </li>
            </ul>
          </div>
          <div v-else class="box-right">
            <span @click="loginHandler">登录</span>
            &nbsp;&nbsp;|&nbsp;&nbsp;
            <span>注册</span>
          </div>

        </div>
      </div>
    </div>
    <div class="router-view">
      <router-view/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      headerlist:[
        {id:1,title:'免费课',path:'/free'},
        {id:2,title:'轻课',path:'/light'},
        {id:3,title:'学位课',path:'/degree'},
        {id:4,title:'题库',path:'/bank'},
        {id:5,title:'老男孩教育',path:'https://www.oldboyedu.com/'},
      ],
      myActive:null,
      activedefault:null,
      headerIsShow:true,
      personal:[
        {id:1,title:"我的账户",name:'account'},
        {id:2,title:"我的订单",name:'order'},
        {id:3,title:"我的优惠券",name:'coupon'},
        {id:4,title:"我的消息",name:'message'},
        {id:5,title:"退出",name:''}
      ],
      myStyle:{
        height:'0px',
        overflow:'hidden',
        display:'none',
      }
    }
  },
  mounted(){

  },
  methods:{
    headerClickHandler(item,index){
      if(item.id===5){
        window.open(this.headerlist[4].path)
      }else{
        this.activedefault = index;
        this.$router.push(item.path)
      }
    },
    loginHandler(){
      this.$router.push({name:'login'});
    },
    myClickHandler(item,index){
      if(index===4){
        this.$store.commit('clearTokens')
      }else{
        this.$router.push({name:item.name})
      }
    },
    addActive(index){
      this.myActive = index
    },
    mouseOver(){
      this.myStyle.display = 'block';
      this.myStyle.height = '202px';
    },
    mouseLeave(){

      this.myStyle.height = '';
      this.myStyle.display = 'none';
    },
    clear_shopping_car(){
      this.$store.commit("clear_shopping_car_number")
    }
  },
  watch:{
    '$route'(to,from){
      if(to.path == "/login"){
        this.headerIsShow = false
      }else{
        this.headerIsShow = true
      }
    }
  },

  computed:{

  },
  created(){
    for(let i=0;i<this.headerlist.length;i++){
      if(this.headerlist[i].path === this.$route.path){
        this.activedefault = i
      }
    };
    if(this.$route.path=="/login"){
      this.headerIsShow = false
    }
  }
}
</script><img src="../../../../AppData/Local/Temp/home-lb-2.333568f.png"/>

<style>
  *{
    margin: 0;
    padding: 0;
  }
  button{
    outline: none;
    border: none
  }
  #app{
    background-color: #fff;
    font-size: 14px;
    font-family: PingFangSC-Light;
    width: 100%;
    min-height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .header{
    background-color: #fff;
    height: 80px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0 0.5px 0.5px 0 #c9c9c9;;
    z-index: 1001;
  }
  .header-content{
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .header-left{
    display: flex;
    align-items: center;
  }
  .header-left > ul{
    list-style:none;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .header-left > ul >li{
    margin-top: -2px;
    margin-right: 30px;
  }
  .header-left > ul >li>span{
    text-align: center;
    padding-bottom: 16px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 16px;
    color: #4a4a4a;
    cursor: pointer;
  }
  .header-left > ul >li>span:hover{
    color:black;
  }
  .header-left > img{
    width: 118px;
    height: auto;
    cursor: pointer;
    margin-right: 30px;
  }
  .active{
    border-bottom: 4px solid #ffc210;
  }
  .header-right{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .shopping-bar{
    background-color: #f7f7f7;
    border-radius: 17px;
    border: 1px solid #f7f7f7;
    width: 88px;
    height: 28px;
    color: #4a4a4a;
    display: flex;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;
  }
  .shopping-bar>b{
    width: 16px;
    height: 16px;
    line-height: 17px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    background: #fa6240;
    border-radius: 50%;
    transform: scale(.8);
    position: relative;
    left: 17px;
    top: -6px;
  }
  .shopping-bar:hover{
    background: #e7e7e7;
  }
  .shopping-bar>img{
    width: 15px;
    margin-left: -15px;
  }
  .shopping-bar>span{
    margin-right: 6px;
  }
  .box-right{
    position: relative;
    display: flex;
    justify-content: space-between;
    color: #4a4a4a;
    font-size: 15px;
    line-height: 80px;
  }
  .box-right::before{
    content: '';
    width: 20px;
  }
  .box-right>span{
    cursor: pointer;
  }
  .box-right>span:hover{
    color:black;
  }
  .router-view{
    margin-top: 80px;
    width: 100%;
    height: auto;
  }

  .nav-study{
    cursor: pointer;
    margin-right: 20px;
  }
  .nav-img{
    cursor: pointer;
    display: flex;
    align-items: center;
  }
  .nav-img>img{
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgb(243, 243, 243);
  }
  .header-drop-down{
    width: 180px;
    position: absolute;
    background: #fff;
    top: 80px;
    z-index: 1001;
    display: inline-block;
    list-style:none;
    box-shadow: 0 2px 4px 0 #e8e8e8;
    border-top: 2px solid #d0d0d0;
    transition:height 1s
  }
  .header-drop-down > li{
    height: 40px;
    color: #4a4a4a;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 13px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    cursor: pointer;
  }
  .header-drop-down >li >i{
    float: right;
    font-size: 16px;
    color: #626262;
    cursor: pointer;

  }
  .myactive{
    background-color: #f7f7f7;
  }
  .fa{
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
  }

</style>
